<template>
	<div class="systemClockOn">
		<p>
			<el-form :rules="rules" ref="addSchoolData" :inline="true" :model="addSchoolData" class="demo-form-inline">
				<el-form-item label="学校名称" prop="name">
					<el-input v-model="addSchoolData.name" placeholder="请输入学校名称"></el-input>
				</el-form-item>
				<el-form-item label="学校编号" prop="school_id">
					<el-input v-model="addSchoolData.school_id" placeholder="请输入学校编号"></el-input>
				</el-form-item>
				<el-form-item label="学校属性" prop="school_type">
					<el-select v-model="addSchoolData.school_type" placeholder="请选择">
						<el-option :label="item" v-for="item in addSchoolData.region_data" :value="item"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="选择省市区" prop="all_address_check">
					<el-cascader :props="props" :options="options" v-model="addSchoolData.all_address_check" @change="allAddressChange">
					</el-cascader>
				</el-form-item>
				<el-form-item label="备注">
					<el-input v-model="addSchoolData.attach" placeholder="请输入备注"></el-input>
				</el-form-item>
				<el-form-item prop="clock_range">
					<el-button type="warning" @click="goMap" size="mini">获取经纬度</el-button>
				</el-form-item>
				<br />
				<el-form-item label="学校图片">
					<el-upload ref="update1" :http-request="addSchoolImg" limit="1" action="" list-type="picture-card" :on-preview="showImgPreview" :on-remove="handleRemove">
						<i class="el-icon-plus"></i>
					</el-upload>
				</el-form-item>
				<br />
				<el-form-item>
					<el-button type="primary" @click="addSchollFrom('addSchoolData')">提交</el-button>
					<!--<el-button type="primary" v-if="showAllbtn" @click="searchBtn">查看全部数据</el-button>-->
				</el-form-item>
			</el-form>
		</p>
		<!--搜索模块-->
		<div class="row" style="padding:10px 0;">
			<div class="col-xs-12">
				<h4>学校搜索:</h4>
			</div>
		</div>
		<div class="inline_search" style="display:inline-block;background-color:rgba(64,158,255,0.3);padding:10px 10px 0;">
			<el-col class="input_col">
				<el-input placeholder="请输入学校名称" v-model="searchData.name"></el-input>
			</el-col>
			<el-col class="input_col">
				<el-cascader :props="props" :options="options" v-model="searchData.all_address_check" @change="allAddressChange"></el-cascader>
			</el-col>
			<el-button @click="searchItem()">搜索</el-button>
			<el-button @click="clearSearchItem()">清空</el-button>
		</div>
		<p v-if="!!allSchoolData && allSchoolData.length>0">学校列表展示</p>
		<el-table v-if="!!allSchoolData && allSchoolData.length>0" :data="allSchoolData" style="width: 100%">
			<el-table-column prop="name" label="学校图片" width="180">
				<template slot-scope="scope">
					<img :src="getLoacl('http') + scope.row.file" alt="" />
				</template>
			</el-table-column>
			<el-table-column prop="name" label="学校" width="180"></el-table-column>
			<el-table-column prop="school_id" label="学校编号" width="180"></el-table-column>
			<el-table-column prop="province" label="省" width="180"></el-table-column>
			<el-table-column prop="city" label="市"></el-table-column>
			<el-table-column prop="region" label="区"></el-table-column>
			<el-table-column label="地理位置">
				<template slot-scope="scope">
					<el-button @click="showMap(scope.row)">查看</el-button>
				</template>
			</el-table-column>
			<el-table-column prop="last_operator" label="最后一次修改操作人"></el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button type="text" @click="editionCheck(scope.row)">编辑</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--图片展示弹框-->
		<el-dialog :visible.sync="dialogVisible">
			<img width="100%" :src="getLoacl('http') + addSchoolData.file[0]" alt="">
		</el-dialog>

		<!--编辑模式-->
		<el-dialog title="修改学校信息" :visible.sync="infoVis" width="60%" :before-close="handleClose">
			<div>
				<el-form :rules="rules" ref="addSchoolData2" :inline="true" :model="addSchoolData" class="demo-form-inline">
					<el-form-item label="学校名称">
						<el-input v-model="addSchoolData.name_new" placeholder="请输入学校名称"></el-input>
					</el-form-item>
					<br />
					<el-form-item label="学校编号">
						<el-input v-model="addSchoolData.school_id" placeholder="请输入学校编号"></el-input>
					</el-form-item>
					<br />
					<el-form-item label="学校属性">
						<el-select v-model="addSchoolData.school_type" placeholder="请选择">
							<el-option :label="item" v-for="item in addSchoolData.region_data" :value="item"></el-option>
						</el-select>
					</el-form-item>
					<br />
					<el-form-item label="选择省市区">
						<el-cascader :props="props" :options="options" v-model="addSchoolData.all_address_check_new">
						</el-cascader>
					</el-form-item>
					<br />
					<el-form-item label="备注">
						<el-input v-model="addSchoolData.attach" placeholder="请输入备注"></el-input>
					</el-form-item>
					<br />
					<el-form-item>
						<el-button type="warning" @click="changeMap" size="mini">修改经纬度</el-button>
					</el-form-item>
					<br />
					<el-form-item label="学校图片">
						<el-upload ref="update2" :http-request="addSchoolImg" :file-list="addSchoolData.file" limit="1" action="" list-type="picture-card" :on-preview="showImgPreview" :on-remove="handleRemove">
							<i class="el-icon-plus"></i>
						</el-upload>
					</el-form-item>
					<br />
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
		    <el-button @click="function(){clearInfo();RouterTo(this, '/systemClockOn')}">取 消</el-button>
		    <el-button type="primary" @click="editionAddInfo">确 定</el-button>
		  </span>
		</el-dialog>
	</div>
</template>
<script>
	import { schoolAction, schoolGetAll, kvGetRefAll, fileUpload, Login, authUpdate, otherGetRegion } from '@/assets/util/api.js'
	export default {
		data() {
			var clock_range_rule = (rule, value, callback) => {
				if(this.addSchoolData.clock_range === '') {
					callback(new Error('请选择学校地理位置！'));
				} else if(this.addSchoolData.clock_range !== '') {
					callback();
				} else {
					callback();
				}
			};
			return {
				access_token: "",
				allSchoolData: [],
				schoolCheckData: "",
				dialogVisible: false,
				props: {
					value: 'name',
					label: "name",
					children: 'children',
				},
				infoVis: false,
				addSchoolData: {
					name: "",
					school_id: "",
					lat: "", //纬度
					lon: "", //经度
					clock_range: "", //打卡范围
					province: "", //省
					city: "", //市
					region: "", //区县
					school_type: "", //学校属性
					school_type_data: "", //所有属性
					address_data: "",
					all_address_check: [], //所有参数
					all_address_check_new: [],
					file: [], //文件地址
					attach: "", //备注
					region_data: "", //学校类型列表
					name_new: "", //新学校名
					province_new: "", //新省
					city_new: "", //新市
					region_new: "", //新区
				},
				rules: {
					name: [{
						required: true,
						message: '学校名称不可为空',
						trigger: 'blur'
					}],
					region: [{
						required: true,
						message: '请选择学校类型',
						trigger: 'blur'
					}],
					all_address_check: [{
						required: true,
						message: '请选择省市区',
						trigger: 'change'
					}],
					clock_range: [{
						validator: clock_range_rule,
						trigger: 'blur'
					}],
				},
				options: [],
				showAllbtn: false,
				searchData: {
					name: "",
					all_address_check: "",
				}
			}
		},
		mounted() {
			var _this = this;
			this.access_token = _this.inStorage("get", "access_token");
			this.otherGetRegion();
			this.kvGetRefAll();
			this.getOverlay();
			console.log(this.$route.query.state)
			if(this.$route.query.state === "search") {
				var data = _this.inStorage("get", "schoolItem");
				if(!!data) {
					this.allSchoolData = [];
					this.allSchoolData.push(data);
					this.showAllbtn = true;
				} else {
					this.RouterTo(this, "/systemClockOn");
				}
				return;
			} else {
				this.showAllbtn = false;
				this.allSchoolData = [];
			}
//			this.schoolGetAll();
		},
		watch: {
			'$route' (to, from) {
				this.getOverlay();
				if(this.$route.query.state == "changeData") {
					this.infoVis = true;
				} else {
					this.infoVis = false;
				}

				if(this.$route.query.state == "search") {
					var data = this.inStorage("get", "schoolItem");
					if(!!data) {
						this.allSchoolData = [];
						this.allSchoolData.push(data);
						this.showAllbtn = true;
					} else {
						this.RouterTo(this, "/systemClockOn");
					}

				} else {
					this.showAllbtn = false;
					this.allSchoolData = [];
					this.allSchoolData.splice(1,0)
				}
			},
			addSchoolData() {},
		},
		methods: {
			goMap() {
				this.RouterTo(this, "/systemMap", {
					state: "add"
				});
			},
			editionCheck(row) {
				console.log(row);
				this.addSchoolData.name = row.name;
				this.addSchoolData.school_id = row.school_id;
				this.addSchoolData.lat = row.lat; //纬度
				this.addSchoolData.lon = row.lon; //经度
				this.addSchoolData.clock_range = row.clock_range; //打卡范围
				this.addSchoolData.province = row.province; //省
				this.addSchoolData.city = row.city; //市
				this.addSchoolData.region = row.region; //区县
				this.addSchoolData.school_type = row.school_type; //学校属性
				this.addSchoolData.all_address_check = []; //所有参数
				this.addSchoolData.all_address_check_new = []; //所有参数
				this.addSchoolData.attach = row.attach; //备注
				this.addSchoolData.name_new = row.name; //新学校名
				this.addSchoolData.province_new = ""; //新省
				this.addSchoolData.city_new = ""; //新市
				this.addSchoolData.region_new = ""; //新区
				this.infoVis = true;
			},
			getOverlay() {
				var overlay = this.inStorage("get", "overlay");
				if(!!overlay) {
					if(overlay.wa > 0) {
						this.addSchoolData.lat = overlay.lat;
						this.addSchoolData.lon = overlay.lng;
						this.addSchoolData.clock_range = overlay.wa;
						return;
					}
				}
				this.addSchoolData.lat = 0;
				this.addSchoolData.lon = 0;
				this.addSchoolData.clock_range = 0;
			},
			//拉取可供选择的数据字典
			kvGetRefAll() {
				var params = {
					access_token: this.access_token,
					module: "学校基本信息",
					field: "school_type",
				}
				kvGetRefAll(this, params).then((res) => {
					console.log(res);
					if(res.data.state == true) {
						this.addSchoolData.region_data = res.data.data[0].field_list[0].options;
					}
				})

			},
			//获取省市区
			otherGetRegion() {
				var params = {
					access_token: this.access_token,
				}
				otherGetRegion(this, params).then(res => {
					console.log(res);
					this.options = res.data.data;
				})
			},
			schoolGetAll() {
				var params = {
					access_token: this.access_token,
					name:this.searchData.name,
					province:this.searchData.all_address_check[0] || "",
					city:this.searchData.all_address_check[1] || "",
					region:this.searchData.all_address_check[2] || "",
				}
				schoolGetAll(this, params).then((res) => {
					if(res.data.state) {
						this.allSchoolData = res.data.data;
					}
				})
			},
			kvGetAll() {
				var params = {
					access_token: this.access_token,
					module: "学校基本信息"
				}
				kvGetAll(this, params).then((res) => {
					console.log(res);
					if(res.data.state) {
						this.schoolCheckData = res.data.data;
					}
				})
			},
			addSchollFrom(formName) {
				console.log(this.$refs[formName].validate)
				this.$refs[formName].validate((valid) => {
					console.log("vaild", valid);
					if(valid) {
						this.schoolAction(1);
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			addSchoolImg(file) {
				var formData = new FormData();
				formData.append("file", file.file);
				fileUpload(this, formData).then((res) => {
					console.log(res);
					if(res.data.state == true) {
						this.addSchoolData.file = res.data.data;
					}
				})
			},
			showImgPreview() {
				this.dialogVisible = true;
			},
			allAddressChange(e) {
				this.addSchoolData.province = this.addSchoolData.all_address_check[0] || ""; //省
				this.addSchoolData.city = this.addSchoolData.all_address_check[1] || ""; //市
				this.addSchoolData.region = this.addSchoolData.all_address_check[2] || ""; //区
			},
			editionAddInfo() {
				this.addSchoolData.province_new = this.addSchoolData.all_address_check_new[0] || ""; //省
				this.addSchoolData.city_new = this.addSchoolData.all_address_check_new[1] || ""; //市
				this.addSchoolData.region_new = this.addSchoolData.all_address_check_new[2] || ""; //区
				this.getOverlay();
				this.schoolAction(2);
			},
			//添加或编辑学校
			schoolAction(action) {
				var params = {
					access_token: this.access_token,
					action: action, //1新增，2编辑
					name: this.addSchoolData.name,
					province: this.addSchoolData.province,
					city: this.addSchoolData.city,
					region: this.addSchoolData.region,
					name_new: this.addSchoolData.name_new,
					province_new: this.addSchoolData.province_new,
					city_new: this.addSchoolData.city_new,
					region_new: this.addSchoolData.region_new,
					school_id: this.addSchoolData.school_id,
					lat: this.addSchoolData.lat,
					lon: this.addSchoolData.lon,
					clock_range: this.addSchoolData.clock_range,
					school_type: this.addSchoolData.school_type,
					file: this.addSchoolData.file[0],
					attach: this.addSchoolData.attach,
				}
				schoolAction(this, params).then((res) => {
					console.log(res);
					if(res.data.state == true) {
						this.clearInfo();
						//						this.schoolGetAll();
						if(action == 1) {
							this.$message.success("添加成功！");
						} else if(action == 2) {
							this.$message.success("修改成功！");
							this.RouterTo(this, "/systemClockOn");
						}
					}
					if(res.data.code) {
						this.$message.error(this.publicMsg(res.data.code, res.data.error));
					}
				})
			},
			clearInfo() {
				this.addSchoolData.name = "";
				this.addSchoolData.school_id = "";
				this.addSchoolData.lat = ""; //纬度
				this.addSchoolData.lon = ""; //经度
				this.addSchoolData.clock_range = ""; //打卡范围
				this.addSchoolData.province = ""; //省
				this.addSchoolData.city = ""; //市
				this.addSchoolData.region = ""; //区县
				this.addSchoolData.school_type = ""; //学校属性
				var len_l = this.addSchoolData.all_address_check.length;
				for(let i = 0; i < len_l; i++) {
					this.addSchoolData.all_address_check.pop();
				}
				var len_n = this.addSchoolData.all_address_check_new.length; //所有参数
				for(let i = 0; i < len_n; i++) {
					this.addSchoolData.all_address_check_new.pop();
				}
				this.addSchoolData.file = []; //文件地址
				this.addSchoolData.attach = ""; //备注
				this.addSchoolData.name_new = ""; //新学校名
				this.addSchoolData.province_new = ""; //新省
				this.addSchoolData.city_new = ""; //新市
				this.addSchoolData.region_new = ""; //新区
				localStorage.clear("overlay");
				this.inStorage("clear", "overlay");
				this.infoVis = false;
				if(!!this.$refs.update1) {
					this.$refs.update1.clearFiles();
				}
				if(!!this.$refs.update2) {
					this.$refs.update2.clearFiles();
				}
			},
			//查看已经保存过的地理位置
			showMap(row) {
				console.log(row);
				var overlay = {
					lat: row.lat,
					lng: row.lon,
					wa: row.clock_range,
				};
				this.inStorage("set", "overlay", overlay);
				this.RouterTo(this, "/systemMap", {
					state: "edition_show"
				});
			},
			changeMap() {
				this.infoVis = false;
				this.showMap(this.addSchoolData);
				this.RouterTo(this, "/systemMap", {
					state: "edition_change"
				});
			},
			searchBtn() {
				this.RouterTo(this, "/systemClockOn");
			},
			//搜索使用函数
			searchItem(){
				this.schoolGetAll();
			},
			clearSearchItem(){
				this.searchData.all_address_check = [];
				this.searchData.all_address_check.splice(1,0);
				this.searchData.name = "";
			}
		},

	}
</script>
<style lang="scss" scoped>
	.systemClockOn {}
	
	.input_col {
		margin-bottom: 10px;
		margin-right: 20px;
		width: 260px;
	}
</style>